<template>
    <view>
        <!-- 1、图片 -->
        <view class="mask flexac f-column" v-if="mode == 1">
            <image class="viewboxs" :src="$imgUrls(pageData.img)" mode="aspectFit" @click="btnClick(pageData.jump_route)"></image>
            <text class="iconfont icon-guanbi size60" @click="cancel"></text>
        </view>
        <!-- 2、确认框 -->
        <u-modal :show="mode == 2" :title="pageData.title" :content="pageData.info" :confirmText="pageData.btn" @confirm="btnClick(pageData.btn_route)"></u-modal>
        <!-- 3、选择框 -->
        <u-modal :show="mode == 3" :title="pageData.title" :content="pageData.info" :cancelText="pageData.btn1" @cancel="btnClick(pageData.btn1_route)"
            showCancelButton :confirmText="pageData.btn2" @confirm="btnClick(pageData.btn2_route)"></u-modal>
        <!-- 5、优惠券（backgroundImg层级最低，其次券，再次coverImg） -->
        <view class="mask flexac f-column" v-if="mode == 5 && pageData">
            <view class="p-re width">
                <image :src="$imgUrls(pageData.popUpStyle.backgroundImg)" mode="widthFix" class="back p-ab"></image>
                <image :src="$imgUrls(pageData.popUpStyle.coverImg)" mode="widthFix" class="foot p-ab"></image>
                <view class="couponPop auto" :style="{background:`linear-gradient(${pageData.popUpStyle.bjColour1}, ${pageData.popUpStyle.bjColour2})`}">
                    <view class="size36 bold t-letter4 text-center padding40-30 zIndex" :style="{color: pageData.popUpStyle.titleColour}">{{ pageData.popUpStyle.title }}</view>
                    <view class="scroll-y p-left30 p-right30" style="min-height: 220rpx; max-height: 580rpx;">
                        <view class="m-bot20 p-re" v-for="(item,index) in pageData.coupons" :key="index">
                            <image :src="$imgUrls(pageData.popUpStyle.couItemBg)" mode="widthFix"></image>
                            <view class="couItem p-ab wh d-flex">
                                <view class="left flexac f-column">
                                    <view>
                                        <text class="h7 m-right4">{{ item.unit }}</text>
                                        <text class="size54 bold">{{ item.price }}</text>
                                        <text class="h7 m-left4">{{ item.priElse }}</text>
                                    </view>
                                    <view class="h7 p-left10 p-right10 text-center">{{ item.info }}</view>
                                </view>
                                <view class="flex-1 p-left30 p-right30 d-flex f-column j-centert">
                                    <view class="size28 color_44 bold t-letter2 ellipsis m-bot10">{{ item.title }}</view>
                                    <view class="h7 color_66 ellipsis_2 m-bot10">{{ item.remark }}</view>
                                    <view class="h7 color_66">{{ item.expiryDate }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="btn zIndex" :style="{color: pageData.popUpStyle.btnColour}" @click="claimCoupons">
                        <image :src="$imgUrls(pageData.popUpStyle.btnImg)" mode="widthFix"></image>
                        <view class="size30 bold t-letter2 p-ab">{{ pageData.popUpStyle.btn }}</view>
                    </view>
                    <view class="size26 text-center zIndex p-bot40" :style="{color: pageData.popUpStyle.titleColour}">可在我的-优惠券中查看</view>
                </view>
            </view>
            <text class="iconfont icon-guanbi size60" @click="cancel"></text>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            baseUrl: this.baseUrl,
            mode: '',
            pageData: '',
            init: false
        }
    },
    computed: {
        ...mapState(['vid', 'openAds', 'startUp'])
    },
    created() { // 通过控制组件的显示隐藏来反复触发
        if(this.openAds) {
            this.getHomeAd()
            this.setLaunch({openAds: false})
        } else {
            this.getPrompt()
        }
    },
    methods: {
        ...mapMutations(['setLaunch', 'setHome']),
        getHomeAd(){ // 只在初始化时的首页触发
            this.init = true
            this.$http.post({ 
                url: '/automaticTask/getUserLoginFeedback'
            }).then(res=>{
                if(res.status) { // 弹出广告
                    this.mode = res.data.mode
                    this.pageData = res.data[`prompt${this.mode}`]
                    if(this.mode == 4) this.btnClick(this.pageData.jump_route)
                } else {
                    this.getPrompt()
                }
            })
        },
        async getPrompt(){ // 适用于tabBar页面，启动或从后台进入前台触发
            this.init = false
            // 读取剪切板 1启用 0关闭
            if(this.startUp.read_pasting_board != 1) return this.cancel()
            if(uni.getStorageSync('prompt_mode')) return 
            console.log('触发口令比对')
            let content = await this.getClipboardData()
            let prev = uni.getStorageSync('clipboardData')
            if(!content || content == ' ' || content == prev) return this.cancel()
            this.$http.post({
                url: '/automaticTask/comparePasswords',
                data: {
                    content
                }
            }).then(res=>{
                if(res.status) { // 匹配成功
                    this.mode = res.data.mode
                    this.pageData = res.data[`prompt${this.mode}`]
                    uni.setStorageSync('prompt_mode', this.mode)
                    // 新用户后续注册时使用
                    if(!this.vid) uni.setStorageSync('used_log_id', res.used_log_id)
                    // 清空剪贴板内容
                    uni.setClipboardData({
                        data: ' ',
                        complete(res) {
                            console.log(res)
                            uni.hideToast()
                            uni.removeStorageSync('clipboardData')
                        }
                    })
                    // 强行跳转新路由
                    if(this.mode == 4) this.btnClick(this.pageData.jump_route)
                } else { // false口令无效
                    uni.setStorageSync('clipboardData', content)
                    this.cancel()
                }
            })
        },
        getClipboardData(){
            return new Promise(resolve=>{
                uni.getClipboardData({
                    success(res) {
                        uni.hideToast()
                        resolve(res.data)
                    },
                    fail(err) {
                        console.log(err)
                        resolve(null)
                    }
                })
            })
        },
        cancel(delay = 1000){
            this.mode = ''
            uni.setStorageSync('prompt_mode', '')
            if(!this.init) return this.$emit('cancelFunc')
            setTimeout(()=>{
                this.pageData = ''
                this.getPrompt()   
            }, delay)     
        },
        btnClick(route){
            if(!route || route == 'close') return this.cancel()
            this.toUrl(route)
            this.cancel(3000)
        },
        claimCoupons(){ // 领取优惠券
            if(!this.vid) return this.setHome({showMode: true})
            this.$http.post({
                url: '/automaticTask/claimPopUpCoupons',
                data: {
                    couponsIds: this.pageData.couponsIds,
                    sign: this.pageData.sign
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.errmsg)
                this.$Toast('领取成功')
                this.cancel()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    z-index: 10070;
}
.viewboxs {
    height: 70vh;
}
.couponPop {
    width: 618rpx;
    border-radius: 25rpx;
    .couItem {
        left: 0;
        top: 0;
        .left {
            width: 186rpx;
            color: #FF5549;
        }
    }
    .btn {
        margin: 20rpx auto;
        >view {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
.back {
    left: 0;
    bottom: calc(100% - 448rpx);
}
.foot {
    left: 0;
    bottom: 0;
    z-index: 1;
}
</style>